import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import piniaPersistConfig from "@/utils/persist"
import {
	hexToRgb,
	shadeColor,
	desaturateColor,
	contrastingColor,
	similarColor,
	getRandomColor
} from '@/common/color.js'
export const useColorStore = defineStore('color', () => {
	const color = ref('#66E9FF')
	const setColor = () => {
		//此处可接口获取主题色
		console.log('切换颜色')
		color.value = getRandomColor()
	}
	
	// 计算相似色,返回三种相似色
	const similar_colors = computed(() => {
		if(!color.value) return;
		return similarColor(color.value)
	})
	
	// 计算相反色
	const inverse_color = computed(() => {
		if(!color.value) return;
		return contrastingColor(color.value)
	})
	
	const publicStyles = computed(() => {
		return {
			// 主题色
			'--color':color.value,
			// -t 后缀为实际ui设计的使用颜色
			'--color-t1':'#F0FDFF',
			'--color-t2':'#ebf1ff',
			'--color-t3':'#F3F5FC',
			'--color-bk':'#01435A',
			// -w 后缀为警告色
			'--color-w1':'#EC4D07',
			// -s 后缀为自动生成的相似色
			'--color-s1':similar_colors.value[0],
			'--color-s2':similar_colors.value[1],
			'--color-s3':similar_colors.value[2],
			// -s 后缀为自动生成的相反色
			'--color-i':inverse_color.value,
			// 阴影颜色
			'--shadow':'#ccd5f0',
			// 普通字体颜色
			'--gray-c':'#cccccc',//用于输入框边框
			'--gray-e':'#eeeeee',
			'--gray-9':'#999999',//用于辅助文字信息，未填写提示文字，未选中灰度文字或按钮等
			'--gray-6':'#666666',//用于少量次级文字信息
			'--gray-3':'#333333',//用于正文文字
			'--gray-line':'#143B48',//用于分割线
			'--gray-card':'#f7f9ff',//用于有卡片形式页面的页面背景色
		}
	})
	

	// return 仓库数据，外部调用
	return {
		color,
		similar_colors,
		inverse_color,
		setColor,
		publicStyles
	}
}, {
	persist: piniaPersistConfig('colorStore')
}
)